<template>
    <div>
        <el-card class="box-card">
            <div>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="登录日志" name="first"></el-tab-pane>
                    <el-tab-pane label="操作日志" name="second"></el-tab-pane>
                </el-tabs>
            </div>
            <!-- 登录日志 -->
            <div v-if="activeName == 'first'">
                <el-table :data="records" style="width: 100%" border highlight-current-row>
                    <el-table-column prop="dateContent" label="日志内容">
                        <template slot-scope="scope,$index">
                            <div>【{{ scope.row.username }}】，操作{{ scope.$index % 3 === 0 ? '成功' : '失败' }}</div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="userid" label="操作人ID" width="180">
                    </el-table-column> -->
                    <el-table-column prop="username" label="操作人" width="300">
                    </el-table-column>
                    <el-table-column prop="createtime" label="创建时间" width="400" sortable>
                        <template slot-scope="scope">
                            <div>{{ new Date(scope.row.createtime).toLocaleString() }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="equalog" label="日志类型" width="180">
                        <template slot-scope="scope">
                            <div>登录日志</div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-top: 20px;">
                    <el-pagination background @size-change="sizeHandler" @current-change="logingLog"
                        style="text-align: right" :current-page="page" :pager-count="7" :page-sizes="[10]"
                        :page-size="limit" layout="total,prev, pager,next,jumper,sizes" :total="totalDate">
                    </el-pagination>
                </div>
            </div>
            <!-- 操作日志 -->
            <div v-else>
                <el-table :data="tableDataSecond" style="width: 100%" border highlight-current-row>
                    <!-- <el-table-column prop="date" label="空" width="180">
                    </el-table-column> -->
                    <el-table-column prop="dateContent" label="日志内容">
                    </el-table-column>
                    <el-table-column prop="datePersonID" label="操作人ID" width="180">
                    </el-table-column>
                    <el-table-column prop="datePerson" label="操作人" width="180">
                    </el-table-column>
                    <el-table-column prop="date" label="创建时间" width="180" sortable>
                    </el-table-column>
                    <el-table-column prop="equalog" label="日志类型" width="180">
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-top: 20px;">
                    <!-- <span class="demonstration">完整功能</span> -->
                    <el-pagination background @size-change="sizeHandler" @current-change="getDateInfo"
                        style="text-align: right" :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
                        layout="total,prev, pager,next,jumper,sizes" :total="totalDate">
                    </el-pagination>
                </div>
            </div>

        </el-card>
    </div>
</template>
<script>
export default {
    // 组件名字
    name: 'App',
    // 状态数据
    data() {
        return {
            page: 1,
            limit: 3,
            activeName: 'first',
            totalDate: 0,
            records: [],
            tableDataSecond: [{
                dateContent: '添加学生,操作成功',
                datePersonID: 'sys_xtgly',
                datePerson: '系统管理员',
                date: '2023-12-23 02:34:22',
                equalog: '操作日志'
            }, {
                dateContent: '添加学生,操作成功',
                datePersonID: 'sys_xtgly',
                datePerson: '系统管理员',
                date: '2023-12-23 02:34:22',
                equalog: '操作日志'
            }, {
                dateContent: '添加学生,操作成功',
                datePersonID: 'sys_xtgly',
                datePerson: '系统管理员',
                date: '2023-12-23 02:34:22',
                equalog: '操作日志'
            }, {
                dateContent: '删除学生,操作成功',
                datePersonID: 'sys_xtgly',
                datePerson: '系统管理员',
                date: '2023-12-23 02:34:22',
                equalog: '操作日志'
            }, {
                dateContent: '删除学生,操作成功',
                datePersonID: 'sys_xtgly',
                datePerson: '系统管理员',
                date: '2023-12-23 02:34:22',
                equalog: '操作日志'
            }],
            currentPage5: 2
        }
    },
    mounted() {
        // 获取第一页数据数据
        this.logingLog()
    },
    methods: {
        // 分页器点击页码的数据
        logingLog(pager = 1) {
            this.page = pager;
            // 整理参数
            let data = {
                page: this.page,
                limit: this.limit
            }
            console.log(data, '===')
            this.$api.wyv3.logingLog(data).then(res => {
                console.log(res, '=======================');
                this.records = res.data.records
                this.totalDate = res.data.total
            })
        },
        //当前页,条数发生变化的回调
        sizeHandler(limit) {
            //整理参数
            this.limit = limit;
            // console.log(this.limit,'整理参数')
            //再次发请求
            this.logingLog();
        },
        // 切换导航
        handleClick(tab, event) {
            console.log(tab, event);
        },
    }

}
</script>
<style></style>